<template>
  <div id="app" class="skMonth">
    <a-card :bordered="true">
      <sk-table-header @dataFrom="getDataFrom" v-bind="$attrs" ref="skTableHeader" :dateType="dateType" :classId="classId"></sk-table-header>
      <div class="ant-card-head-wrapper">
        <div class="ant-card-head-title">
          <span class="title">全部情况</span>
          <span class="subtitle" style="margin-bottom: 14px;">数据时间：{{dataDate}}</span>
        </div>
        <div class="ant-card-extra">
          <div class="left-circle-icon">
            <a-icon type="left-circle"  @click="closeTable" style="font-size: 22px;"/>
          </div>
        </div>
      </div>
      <a-row :gutter="[12, 28]">
        <a-col>
          <a-table :loading="loading" :columns="columns" :data-source="dataSource" :pagination="false" bordered 
            :scroll="{x:dataColumns.length > 3 ? 2000 : 0,y:530}"> 
          </a-table>
        </a-col>
      </a-row>
      <a-row :gutter="[12, 28]">
        <a-col>
          <sk-student-table v-if="dataForm.classId != ''" ref="skStudentTable" @dataFrom="getDataFrom" :dateType="dateType" :rateType="'出勤'"></sk-student-table>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>
<script>
import { getAction } from '@/api/manage'
import { filterDictTextByCache } from '@/components/dict/JDictSelectUtil';
import skTableHeader from "./skTableHeader";
import skStudentTable from "./skStudentTable";
export default {
  name: 'skAllDetail',
  data() {
    return {
      url: {
        list: 'management/skStudentCheck/getStudentCheckStatistical'
      },
      loading:false,
      dataDate: '',
      dataForm:{},
      dataColumns:[],
      columns:[],
      dataSource:[],
    }
  },
  props:["dateType", "classId"],
  components: {
    skTableHeader,
    skStudentTable
  },

  filters: {},

  computed: {},
  activated() {
  },
  
  created() {
    this.dataDate = this.$skCommon.getDate(1);
  },

  mounted() {
  },
  
  methods: {
    // 关闭表格页面
    closeTable(){
      let data = {
        show:true,
        classId:this.classId
      }
      this.$emit("cardData",data);
    },
    // 获取参数
    getDataFrom(dataForm){
      this.getDetail(dataForm);
      this.$nextTick(()=>{
        if (dataForm.classId != "") {
          this.$refs.skStudentTable.getStudentData(dataForm);
        }
      })
    },
    // 详情
    getDetail(dataForm) {
      this.dataForm = dataForm;
      console.log('dataForm', this.dataForm);
      const semesterId = dataForm.semesterId ? dataForm.semesterId : dataForm.semesterHistoryId
      const params = {
        statisticalScope: 'class',
        timeScope: dataForm.dateType == 'sem' || dataForm.dateType == 'historySem' ? semesterId : dataForm.dateType,
        classId: dataForm.classId ? dataForm.classId : undefined
      }
      this.setColumns(semesterId);
      this.loading = true;
      getAction(this.url.list, params)
        .then(res => {
          if (res.success) {
            this.dataSource = [];
            let classList = this.getClassList(dataForm.classId);
            classList.forEach(el => {
              let classItem = {
                classId: el.id,
                className: el.className,
                classType: el.classType
              }
              if(res.result.length > 0) {
                const classData = res.result.filter(item => {
                  return item.classId == el.id
                })
                let totalShouldArrive = 0;
                let totalActualArrival = 0;
                let totalLate = 0;
                for(let rowIndex = 0; rowIndex < this.dataColumns.length; rowIndex++){
                  const rowString = this.dataColumns[rowIndex].toString()

                  if (this.dataForm.dateType == 'sem' || this.dataForm.dateType == 'historySem') {
                    const monthData = classData.find(item => item.month == rowString);
                    if(monthData){
                      totalShouldArrive += monthData.shouldArrive;
                      totalActualArrival += monthData.actualArrival;
                      totalLate += monthData.late;
                      classItem['shouldArrive' + rowString] = monthData.shouldArrive;
                      classItem['actualArrival' + rowString] = monthData.actualArrival;
                      classItem['late' + rowString] = monthData.late;
                      classItem['rate' + rowString] = (monthData.rate * 100).toFixed(2);
                      classItem['lateRate' + rowString] = (monthData.lateRate * 100).toFixed(2);
                    }
                  }else {
                    const monthData = classData.find(item => item.statisticalDate.substring(5) == rowString);
                    if(monthData){
                      totalShouldArrive += monthData.shouldArrive;
                      totalActualArrival += monthData.actualArrival;
                      totalLate += monthData.late;
                      classItem['shouldArrive' + rowString] = monthData.shouldArrive;
                      classItem['actualArrival' + rowString] = monthData.actualArrival;
                      classItem['late' + rowString] = monthData.late;
                      classItem['rate' + rowString] = (monthData.rate * 100).toFixed(2);
                      classItem['lateRate' + rowString] = (monthData.lateRate * 100).toFixed(2);
                    }
                  }
                }
                classItem['totalRate'] = totalShouldArrive == 0 ? '-' : ( ( (totalActualArrival / totalShouldArrive) > 1 ? 1 : (totalActualArrival / totalShouldArrive) ) * 100).toFixed(2);
                classItem['totalLateRate'] = totalShouldArrive == 0 ? '-' : ( ( (totalLate / totalShouldArrive) > 1 ? 1 : (totalLate / totalShouldArrive) ) * 100).toFixed(2);
              }
              this.dataSource.push(classItem);
            })
            this.loading = false;
          } else {
            this.$message.warning(res.message);
            this.loading = false;
          }
        })
        .catch(error => {
          console.error(error)
          this.loading = false;
        })
    },
    getClassList(classId) {
      let classList = this.$refs.skTableHeader.classListData()
      if(classId){
        classList = classList.filter(item => {
          return item.id == classId
        })
      }
      return classList;
    },
    // 表头
    setColumns(semesterId){
      this.columns = [
        {
          title: '年级',
          align: 'center',
          dataIndex: 'classType',
          key: 'classType',
          fixed: 'left',
          width: 80,
          customRender: function(text) {
            return filterDictTextByCache('class_type', text)
          }
        },
        {
          title: '班级',
          align: 'center',
          dataIndex: 'className',
          key: 'className',
          fixed: 'left',
          width: 100,
        },
      ];
      
      let totalTitle = '本月'
      if (this.dataForm.dateType == 'week') {
        totalTitle = '本周'
        this.dataColumns = this.$skCommon.getCurrentWeekDays();
      } else if (this.dataForm.dateType == 'sem' || this.dataForm.dateType == 'historySem') {
        totalTitle = '学期'
        const semester = this.dataForm.semester;
        this.dataColumns = this.$skCommon.getMonths(semester.startDate, semester.endDate, 'yyyy-MM');
      } else {
        totalTitle = '本月'
        this.dataColumns = this.$skCommon.getCurrentMonthDays();
      }
      for(let rowIndex = 0; rowIndex < this.dataColumns.length; rowIndex++){
        const rowString = this.dataColumns[rowIndex].toString()
        const columnsKey = rowString.replace('-', '')
        this.columns.push(
          {
            title: rowString,
            align: 'center',
            children: [
              {
                title: '出勤人数',
                align: 'center',
                dataIndex: 'actualArrival'+rowString,
                key: 'actualArrival'+rowString,
                width: this.dataColumns.length > 3 ? 100 : 'unset',
                // width: 100,
                customRender: function(text) {
                  return text || '-'
                }
              },
              {
                title: '迟到人数',
                align: 'center',
                dataIndex: 'late'+rowString,
                key: 'late'+rowString,
                width: this.dataColumns.length > 3 ? 100 : 'unset',
                // width: 100,
                customRender: function(text) {
                  return text || '-'
                }
              },
              {
                title: '出勤率(%)',
                align: 'center',
                dataIndex: 'rate'+rowString,
                key: 'rate'+rowString,
                width: this.dataColumns.length > 3 ? 120 : 'unset',
                // width: 100,
                customRender: function(text) {
                  return text || '-'
                }
              },
              {
                title: '迟到率(%)',
                align: 'center',
                dataIndex: 'lateRate'+rowString,
                key: 'lateRate'+rowString,
                width: this.dataColumns.length > 3 ? 120 : 'unset',
                // // width: 100,
                customRender: function(text) {
                  return text || '-'
                }
              },
            ],
          },
        )
      }
      this.columns.push(
        {
          title: totalTitle,
          align: 'center',
          children: [
            {
              title: '出勤率(%)',
              align: 'center',
              dataIndex: 'totalRate',
              key: 'totalRate',
              width: 120,
              customRender: function(text) {
                return text || '-'
              }
            },
            {
              title: '迟到率(%)',
              align: 'center',
              dataIndex: 'totalLateRate',
              key: 'totalLateRate',
              width: 120,
              customRender: function(text) {
                return text || '-'
              }
            },
          ]
        }
      )
      console.log('columns', this.columns);
    },
  }
}
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
// @import '~@assets/less/skReport.less';
    .ant-card-head-title .title {
      margin-bottom: 14px;
      font-size: 20px;
      padding-right: 10px;
    }
</style>
